<template>
	<view class="detailContainer">
		<view class="content_title">
			<view class="content_title_top">
				<view class="title">{{title}}</view>
				<u-tag :text="state > currentIndex ? '已完成' : projectInfo.isTimeout ? '已超时' : '进行中'" size='small' :type="state > currentIndex ? 'success' : projectInfo.isTimeout ? 'error' : 'primary'"></u-tag>
			</view>
			<view class="time">{{form.createTime}}</view>
		</view>
		<view>
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="送审时间" :border-bottom="false" :required="true">
					<u-picker mode="time" v-model="timeShow1" :params="params" @confirm="ensureTime1"></u-picker>
					<u-button @click="getTime(1)" :hair-line="false" :disabled='isHide' :custom-style="{
								position: 'relative',
								backgroundColor:'#f2f3f5',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
							}">
						{{form.time0 ? form.time0 : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
				</u-form-item>
				<u-form-item label="审定时间" :border-bottom="false" :required="true">
					<u-picker mode="time" v-model="timeShow2" :params="params" @confirm="ensureTime2"></u-picker>
					<u-button @click="getTime(2)" :hair-line="false" :disabled='isHide' :custom-style="{
								position: 'relative',
								backgroundColor:'#f2f3f5',
								borderRadius: '5px',
								padding:'5px 10px',
								margin: '0',
								border:'0px solid #ffffff',
							}">
						{{form.time1 ? form.time1 : '请选择'}}
						<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
					</u-button>
				</u-form-item>
				<u-form-item label="送审金额" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form.money0" :disabled='isHide' :custom-style="{
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>				
				<u-form-item label="结算金额" :border-bottom="false" :required="true">
					<view class="content_bottom_row">
						<u-input v-model="form.money1" type="text" :disabled='isHide' :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>
				<u-form-item label="审计单位" :border-bottom="false" :required="true">
						<u-input v-model="form.input0" type="text" :disabled='isHide' :custom-style="{
									width:'50vw',
									backgroundColor:'#f2f3f5',
									borderRadius: '5px',
									padding:'5px 10px',
									margin:'0',
								}" />
				</u-form-item>
			</u-form>
			<u-button :ripple="true" :hair-line="false" :custom-style="{
						backgroundColor: '#5c77ff',
						color:'#ffffff',
						margin:'20px 0',
						fontSize:'18px',
						padding:'5px 0',
						boxSizing:'content-box',
					}"
					@click="submit"
					v-if='!isHide'
					>
				提交
			</u-button>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default { //项目推进item组件
		name: "Poject_tj_item",
		props: ['title', 'projectInfo','state', 'currentIndex'],
		data() {
			return {
				isHide:false,
				timeShow1:false,
				timeShow2: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form:{
					input0:'',
					money0:'',
					money1:'',
					projectId:'',
					time0:'',
					time1:'',
				},
			}
		},
		mounted(){
			this.getProjectInfo()
		},
		methods: {
			getProjectInfo(){
				this.$ajax({
					url: `/3/wx/stage/${this.projectInfo.id}`,
					method: 'GET',
					success: (res) => {
						if (res.data.state == 200 && res.data.data.length != 0) {
							this.form = res.data.data[0]
							this.isHide = true
						}
					},
					complete: () => {
				
					},
				});
			},
			getTime(val){
				if(val == 1){
					this.timeShow1 = true
				}else if(val == 2){
					this.timeShow2 = true
				}
			},
			ensureTime1(data){
				this.form.time0 = data.year + '-' + data.month + '-' + data.day
			},
			ensureTime2(data){
				this.form.time1 = data.year + '-' + data.month + '-' + data.day
			},
			submit(){
				this.form.projectId = this.projectInfo.id
				this.form.money0 = this.form.money0
				this.form.money1 = this.form.money1
				this.$ajax({
					url: '/3/wx/stage',
					method: 'POST',
					data: this.form,
					success: (res) => {
						if (res.data.state == 200) {
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
							})
						}
						this.$ajax({
							url: `/3/wx/stage/complete/${this.projectInfo.id}`,
							method: 'PUT',
							success: (res) => {
								this.$emit('changeCurrentIndex', ++this.currentIndex)
							},
							complete: () => {
						
							},
						});
					},
					complete: () => {
				
					},
				});
			}
		},
		created() {

		},
	}
</script>

<style lang="scss" scoped>
	.detailContainer {
		background-color: #fff;
		width: 100%;
		padding: 0 15px;
	}

	.content_title {
		.content_title_top {
			display: flex;
			align-items: center;

			.title {
				font-size: 18px;
				margin-right: 10px;
				font-weight: bold;
			}
		}

		.time {
			color: #BFC0C2;
			margin-top: 4px;
		}
	}

	.content_bottom_row {
		@include flex_layout_row;
		justify-content: flex-start;
		align-items: center;
	}
</style>
